<template>
  <div class="search-top">
    <el-row style="display: flex; flex-wrap: wrap; padding: 10px 20px;">
      <el-col v-if="false" :span="24">
        <el-radio-group v-model="typeKey" size="small">
          <el-radio-button v-for="item in typeList" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-col>

      <el-col :span="24">
        <el-checkbox-group v-model="labelKey">
          <span class="font-12">类型：</span>
          <el-checkbox v-for="item in typeNewList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
          <br/>
          <span class="font-12">标签：</span>
          <el-checkbox v-for="item in labelList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-col>

      <el-col :span="24">
        <el-checkbox-group v-model="publishStatus">
          <span class="font-12">发布：</span>
          <el-checkbox v-for="item in publishStatusList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-col>
    </el-row>

    <el-row style="display: flex; padding: 10px 20px;">
      <div style="margin-right: 20px;">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          style="width: 500px;"
          v-model="searchKey"
          @change="search">
            <template #prepend>
              <el-select v-model="searchType" placeholder="请选择" style="width: 100px;">
                <el-option key="keywords" label="关键词" value="keywords"></el-option>
                <el-option key="site_id" label="站点id" value="site_id"></el-option>
              </el-select>
            </template>
            <template #append>
              <el-button icon="Search" @click="search"></el-button>
            </template>
        </el-input>

        <el-button
          style="margin-left: 20px;"
          v-if="typeKey.length > 0 || labelKey.length > 0 || searchKey.length > 0"
          size="small"
          round
          type="info"
          plain
          @click="typeKey = ''; labelKey = []; searchKey = ''; searchType = 'keywords';">
            清除
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
  import { LocalStorage } from '@/utils/localstorage.js';
  import { mapActions, mapState } from 'vuex'
  import { isArray, isObject } from '@/utils/public.js';
  export default {
    data () {
      return {
        typeList: [],
        typeNewList: [],
        labelList: [],

        typeKey: '',  // TODO: 以后可能废除
        labelKey: [],
        searchKey: '',
        searchType: 'keywords',  // keywords / site_id
        publishStatus: [],
        publishStatusList: [
          {
            label: '已发布',
            value: '1',
          },
          {
            label: '未发布',
            value: '2',
          }
        ],

        H5_TYPE: {
          H5: 1,
          PC: 2,
          Canvas: 3,
          Card: 4,
        },
      }
    },
    computed: {
      ...mapState({
        userid: state => state.user.user.userid,
      }),
    },
    beforeMount() {
      // 1. 获取 tags
      this.getSearchTagList({
        callback: (res) => {
          const data = isObject(res) && res.data ? res.data : res;
          if(isArray(data) && data[0]) {
            this.typeList = [];
            this.typeNewList = [];
            for(let key in data[0]) {
              this.typeList.push({
                label: data[0][key],
                value: this.H5_TYPE[data[0][key]],
              })

              this.typeNewList.push({
                label: data[0][key],
                value: key,
              })
            }
            this.typeList.sort((a, b) => {
              return a.value > b.value ? 1 : -1;
            });

            this.typeNewList.sort((a, b) => {
              return a.value > b.value ? 1 : -1;
            });
          }

          if(isArray(data) && data[1]) {
            this.labelList = [];
            for(let key in data[1]) {
              this.labelList.push({
                label: data[1][key],
                value: key,
              })
            }
            this.labelList.sort((a, b) => {
              return a.value > b.value ? 1 : -1;
            });
          }
        },
      });

      // 2. 获取暂存搜索键值
      this.getSearchOptions();
    },
    methods: {
      ...mapActions({
        'getSearchTagList': 'user/getSearchTagList',
      }),

      getAdminLocalStorage(getKey) {
        // get admin produ curPage
        // 定义 user 专属
        const key = 'admin_' + this.userid;

        // 判断是否存在 admin  localStorage
        let adminStorage = LocalStorage.getItem(key);
        return adminStorage ? adminStorage[getKey] : undefined;
      },
      getSearchOptions() {
        const options = this.getAdminLocalStorage('options');
        this.typeKey = options && options['h5type'] || '';
        this.labelKey = options && options['tags'] ? options['tags'].split(',') : [];
        this.publishStatus = options && options['status'] ? options['status'].split(',') : [];
        this.searchType = options && options['searchType'] || 'keywords';
        this.searchKey = options && options[this.searchType] || '';
      },

      search() {
        let params = {};
        params["h5type"] = this.typeKey;
        params["tags"] = isArray(this.labelKey) && this.labelKey.length > 0 ? this.labelKey.join(',') : '';
        params["status"] = isArray(this.publishStatus) && this.publishStatus.length > 0 ? this.publishStatus.join(',') : '';
        params[this.searchType] = this.searchKey;
        params["searchType"] = this.searchType;
        this.$emit('search', params);
      },
    },
  }
</script>

<style lang="scss">
  .search-top {
    border-bottom: 1px solid #EDEFF2;

    .el-input__inner {
      border: 1px solid #DCDFE6;
    }
  }
</style>
